<template>
    <div class="music_page " :class="[{open_mu_page:isopen_mu_page},{down_mu_page:isdown_mu_page}]" >
      <div class="bg_img" :style="{'background-image':'url('+songImg+')'}">

      </div>
      <div class="music_page_box">
          <div class="mu_title_top">
            <div class="song_namebox">
                <i class="iconfont icon-jiantou8 down" @click="downB"></i>
                <h3>{{song_name}}</h3>
                <i class="iconfont icon-gengduo2 more"></i>
            </div>
            <div class="singer">
                <p><span class="xian">— </span><span>{{songauthor}}</span><span class="xian"> —</span></p>
            </div>
            <div class="sound_box">
                <div class="sound_content">
                    <div class="box"><p>流畅 <i class="iconfont icon-jiantou8"></i></p></div>
                    <div class="box"><p>音效 <span class="off">off</span></p></div>
                </div>
            </div>
        </div>
        <div class="changpian">
            <div class="imgBox " :class="{CD_anim:isplay}" >
                <img :src="songImg" alt="">
            </div>
        </div>
        <div class="lyrics">
          <!-- 歌曲进度时间 -->
            <div class="songTimeing" v-if="Math.floor(issongTimging/60)<1 && issongTimging%60>=10">
              <p>
                  {{ "00" +":"+issongTimging%60}}
              </p> 
            </div>
            <div class="songTimeing" v-else-if="Math.floor(issongTimging/60)<1 && issongTimging%60<10">
              <p>
                  {{ "00" +":"+"0"+issongTimging%60}}
              </p> 
            </div>
            <div class="songTimeing" v-else-if="Math.floor(issongTimging/60)>=1 && issongTimging%60 >=10" >
              <p>
                  {{ "0"+Math.floor(issongTimging/60)+":"+issongTimging%60}}
              </p> 
            </div>
            <div class="songTimeing" v-else-if="Math.floor(issongTimging/60)>=1 && issongTimging%60 <10" >
              <p>
                  {{ "0"+Math.floor(issongTimging/60)+":"+"0"+issongTimging%60}}
              </p> 
            </div>
              <!-- 进度条 -->
            <div class="progressBox">
                <div class="progressConter" :style="{width:isprogress+'%'}">
                  <div class="qiu"></div>
                </div>
            </div>
            <!-- 歌曲总时间 -->
            <div class="songTime" v-if="Math.floor(issongTime%60)<10">
              <p>
                 {{ "0"+Math.floor(issongTime/60) +":"+"0"+issongTime%60}}
              </p>
            </div>
            <div class="songTime" v-else-if="Math.floor(issongTime%60)>=10">
              <p>
                {{ "0"+Math.floor(issongTime/60) +":"+issongTime%60}}
              </p>
                
            </div>
        </div>
        <div class="footer">
            <div class="cut_the_song">
              <div class="moshi"><i class="iconfont icon-danquxunhuan"></i></div>
              <div class="kongzhi">
                <i class="iconfont icon-shangyishou " @click="lastBtn"></i>
                <span class="stop_action" @click="isplay_icon">
                  <i v-if="isplay" class="iconfont icon-zanting2"></i>
                  <i v-else class="iconfont icon-bofang1" ></i>
                </span>
                <i class="iconfont icon-xiayishou3" @click="nextBtn"></i></div>
              <div class="list"><i class="iconfont icon-yinleliebiao"></i></div>
            </div>
            <div class="nice">
                <p class="nice_box">
                    <span><i class="iconfont icon-xin2" @click="xin2"></i></span>
                    <span><i class="iconfont icon-xiazai2"></i></span>
                    <span><i class="iconfont icon-zhuanfa"></i></span>
                    <span><i class="iconfont icon-xinxi1"></i></span>
                </p>
            </div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  name: "music_page",
  data() {
    return {
      nextBum: "1",
      lastBum: "1",
      songImg: "",
      songauthor: "",
      song_name: "",
    };
  },
  methods: {
    downB() {
      this.$store.commit("ageisOpen_mu_page", false);
      this.$store.commit("ageisDown_mu_page", true);
    },
    xin2() {
      document.querySelector(".icon-xin2").style.color = "#ff7560";
    },
    isplay_icon() {
      console.log(this.isprogress);
      if (this.isplay == true) {
        this.$store.commit("ageisplayicon", false);
      } else {
        this.$store.commit("ageisplayicon", true);
      }
    },
    // 下一首控制
    nextBtn() {
      this.nextBum++;
      this.$store.commit("agenext", this.nextBum);
      document.querySelector(".icon-xiayishou3").style.color = "#888";
      setInterval(function() {
        document.querySelector(".icon-xiayishou3").style.color = "#21c5bd";
      }, 200);
    },
    // 上一首控制
    lastBtn() {
      this.lastBum++;
      this.$store.commit("agelast", this.lastBum);
      document.querySelector(".icon-shangyishou").style.color = "#888";
      setInterval(function() {
        document.querySelector(".icon-shangyishou").style.color = "#21c5bd";
      }, 200);
    }
  },
  computed: {
    isopen_mu_page() {
      return this.$store.state.isOpen_mu_page;
    },
    isdown_mu_page() {
      return this.$store.state.isDown_mu_page;
    },
    issongArr() {
      return this.$store.state.songArr;
    },
    isplay() {
      return this.$store.state.isplayicon;
    },
    issongTime() {
      return Math.floor(this.$store.state.songTime);
    },
    issongTimging() {
      return Math.floor(this.$store.state.songTimging);
    },
    isprogress() {
      return (
        Math.floor(this.$store.state.songTimging) /
        Math.floor(this.$store.state.songTime) *
        100
      );
    }
  },
  watch: {
    issongArr() {
      if (this.issongArr.pic_premium) {
        this.songImg = this.issongArr.pic_premium;
        this.songauthor = this.issongArr.author;
        this.song_name = this.issongArr.title;
      } else {
        this.songImg = this.issongArr.songinfo.artist_500_500;
        this.songauthor = this.issongArr.songinfo.artist;
        this.song_name = this.issongArr.songinfo.title;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.music_page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 99;
  transform: translate(-100%, 100%);
  background: rgb(214, 214, 214);
  .bg_img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5rem;
    // left: -4rem;
    transform: scale(1.3);
    filter: blur(5px);
    padding: 20rem;
    box-sizing: border-box;
  }
  .music_page_box {
    background: rgba(15, 16, 2, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .mu_title_top {
      width: 100%;
      height: 16%;
      z-index: 101;
      .song_namebox {
        width: 100%;
        height: 34%;
        position: relative;
        .down {
          font-size: 0.55rem;
          color: #fff;
          position: absolute;
          left: 0.75rem;
          top: 0.35rem;
        }
        h3 {
          font-size: 16px;
          text-align: center;
          font-weight: normal;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
          overflow: hidden;
          white-space: nowrap; /*强制显示一行*/
          text-overflow: ellipsis; /*溢出文字省略号处理*/
          width: 50%;
        }
        .more {
          font-size: 0.8rem;
          color: #fff;
          position: absolute;
          right: 0.8rem;
          top: 0.2rem;
        }
      }
      .singer {
        width: 100%;
        height: 30%;
        p {
          width: 100%;
          text-align: center;
          span {
            color: #fff;
            font-size: 13px;
          }
          .xian {
            color: #ababab;
          }
        }
      }
      .sound_box {
        width: 100%;
        height: 36%;
        position: relative;
        .sound_content {
          display: inline-block;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          .box {
            padding: 0.07rem 0.15rem;
            border: 1px solid #fff;
            border-radius: 0.2rem;
            display: inline-block;
            margin: 0 0.15rem;
            p {
              font-size: 13px;
              color: #fff;
              line-height: 13px;
              i {
                font-size: 10px;
                line-height: 10px;
              }
              .off {
                font-size: 10px;
                line-height: 10px;
              }
            }
          }
        }
      }
    }
    .changpian {
      width: 100%;
      height: 45%;
      position: relative;
      .imgBox {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7rem;
        height: 7rem;
        border-radius: 50%;
        border: 2px solid #34352f;
        overflow: hidden;
        opacity: 0.8;
        img {
          width: 100%;
        }
      }
    }
    .lyrics {
      width: 100%;
      height: 16%;
      position: relative;
      .progressBox {
        position: absolute;
        left: 50%;
        bottom: 10%;
        transform: translate(-50%, 0%);
        width: 50%;
        height: 0.05rem;
        background: #888;
        border-radius: 3rem;
        
        .progressConter {
          display: inline-block;
          width: 10%;
          height: 0.05rem;
          background: #21c5bd;
          position: relative;
          .qiu{
            display: inline-block;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0%, -50%);
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 50%;
            background: #21c5bd;
          }
        }
      }
      .songTime {
        position: absolute;
        right: 10%;
        bottom: 5%;
        > p {
          font-size: 0.01rem;
          color: #fff;
        }
      }
      .songTimeing {
        position: absolute;
        left: 10%;
        bottom: 5%;
        > p {
          font-size: 0.01rem;
          color: #fff;
        }
      }
    }
    .footer {
      width: 100%;
      height: 23%;
      color: #a9a69f;

      .cut_the_song {
        width: 100%;
        height: 55%;
        overflow: hidden;
        position: relative;
        .moshi {
          width: 21%;
          height: 100%;
          float: left;
          position: relative;
          i {
            font-size: 0.65rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .kongzhi {
          width: 58%;
          height: 100%;
          color: #21c5bd;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          padding: 0 0.3rem;
          box-sizing: border-box;
          .icon-shangyishou {
            font-size: 1.2rem;
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(20%, -50%);
          }
          .stop_action {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -55%);
            i {
              font-size: 1.85rem;
            }
          }

          .icon-xiayishou3 {
            font-size: 1.2rem;
            position: absolute;
            top: 50%;
            right: 0%;
            transform: translate(-20%, -50%);
          }
        }
        .list {
          width: 21%;
          height: 100%;
          float: right;
          position: relative;
          i {
            font-size: 0.65rem;
            position: absolute;
            top: 50%;
            right: 50%;
            transform: translate(50%, -50%);
          }
        }
      }
      .nice {
        width: 100%;
        height: 45%;
        .nice_box {
          width: 100%;
          height: 100%;
          overflow: hidden;
          span {
            display: inline-block;
            width: 25%;
            height: 100%;
            text-align: center;
            position: relative;
            i {
              display: inline-block;
              font-size: 0.9rem;
              position: absolute;
              top: 50%;
              right: 50%;
              transform: translate(50%, -50%);
            }
          }
        }
      }
    }
  }
}
// 关闭动画
.down_mu_page {
  animation-name: down_mu;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; /*动画结束位置在动画最后*/
  animation-iteration-count: 1;
  transform: translate(0%, 0%);
}
@keyframes down_mu {
  0% {
  }
  50% {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    transform: translate(-50%, -50%) scale(0.15);
    border-radius: 50%;
  }
  100% {
    transform: translate(-100%, 100%) scale(0.15);
    border-radius: 150rem;
  }
}
// 弹出动画
.open_mu_page {
  animation-name: open_mu;
  animation-duration: 0.5s;
  animation-fill-mode: forwards; /*动画结束位置在动画最后*/
  animation-iteration-count: 1;
  // transform: translate(0%, 0%);
}
@keyframes open_mu {
  0% {
    transform: translate(-100%, 100%) scale(0.12);
  }
  50% {
    border-radius: 150rem;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 50%;
    transform: translate(-50%, -50%) scale(0.12);
  }
  100% {
    height: 100%;
    transform: scale(1);
    border-radius: 0%;
    transform: translate(0%, 0%) scale(1);
  }
}
// 播放cd动画
.CD_anim {
  animation-name: cd_dong;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: running;
  animation-fill-mode: forwards;
}
@keyframes cd_dong {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>
